<template>
  <div class="header-container" >
    <el-row >
        <el-col :span="12">    
            <div class="l-content">
                <h3 id="title" >软件售后管理系统</h3>
            </div> <!--左部分-->
        </el-col>    
        <el-col :span="12">
            <div class="r-content">
               <el-button type="info" id="returnlogin" @click="dialogVisible = true" >退出登录</el-button>
            </div>
             <!--右部分-->
        </el-col>
    </el-row>
    <el-dialog
    title="提示"
    :visible.sync="dialogVisible"
    width="30%"
    ><!-- :before-close="handleClose" 点击叉号会触发属性  -->
    <span>确认退出登录吗</span>
    <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="layout">确 定</el-button>
    </span>
    </el-dialog>
  </div>
</template>

<script>
import Cookie from 'js-cookie'
import { returnlogin } from '@/api/login'


const token = Cookie.get('token')
console.log(token)
export default {
    data(){
        return{
            dialogVisible: false, //弹出框显示
            
        }
    },
    methods: {
    
    layout(){
       
        const token = sessionStorage.getItem('token1');
        console.log(token)
        if(true){
            returnlogin(token).then(({ data }) => {
                console.log(data)
                if (data.code == 200) {
                    this.$message.success("成功");

                    sessionStorage.removeItem('token1');
                    this.$router.push('/Login')
                   
                } 
                else{
                    this.$message.error("退出失败");
                }
            })
        } 
       
    }
    }
    
}
</script>

<style>
.header-container{
    background-color:rgb(63, 56, 56);
    height: 60px;
    padding: 0;
    
}
.el-header{
    padding: 0;
}
#title{
    color: #fff;
    margin-left: 28px;
    font-size: 18px;
}   
#returnlogin{
    background-color: rgb(63, 56, 56);
    height: 60px;
    float: right;
}
</style>